<template>
	<view style="padding-bottom: 50rpx;">
		<view class="title">
			<view class="left">新建整改信息</view>
			<view class="right">
				<view class="scan" @click="goScan">
					<image src="/fireGridCheck/static/s.png" mode=""></image>
				</view>
				<text style="color: #3080FB;" @click="goScan">扫码直接获取相关信息</text>
			</view>
		</view>
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			<uni-forms-item required label="检查点类型" name="检查点类型">
				<view :class="label == '请选择检查点类型' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}
				</view>
				<lb-picker ref="picker" @click="handleTap('picker')" @input="binddata('检查点类型',$event)" mode="selector"
					:list="pointTypeList" :dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
				<!-- <input maxlength="50" placeholder="请输入设施类型" v-model='resident.name' @input="binddata('name',$event.detail.value)"> -->
			</uni-forms-item>
			<uni-forms-item required label="检查点名称：" name="检查点名称">
				<view :class="label1 == '请选择检查点名称' ? 'color':''" class="tap" @click="handleTap('picker1')">{{label1}}
				</view>
				<lb-picker ref="picker1" @click="handleTap('picker1')" @input="binddata('检查点名称',$event)" mode="selector"
					:list="checkPointList" :dataset="{ name: 'label1' }" @confirm="handleConfirm1"
					@cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item required label="检查点地址：" name="地址">
				<input maxlength="18" v-model="params['地址']" placeholder="请输入检查点地址"
					@input="binddata('地址',$event.detail.value)">
			</uni-forms-item>
			<uni-forms-item label="整改事项：" name="整改事项ids">
				<view class="color" @tap="toOpen">请选择整改事项</view>
				<jpSelect ref="jpSelect" :list="configList" @checked="checked" :item="item" select="more"
					tite="请选择巡检事项"></jpSelect>
				<!-- <input maxlength="18" placeholder="请输入整改事项" @input="binddata('巡检事项',$event.detail.value)" > -->
			</uni-forms-item>
			<view class="check-wrap">
				<view class="item-wrap" v-for="(item, index) in value">{{'(' + (index+1) + ')'}}{{item}}</view>
			</view>
			<uni-forms-item label="备注信息：" name="备注">
				<input maxlength="18" v-model="params['备注']" placeholder="请输入备注信息">
			</uni-forms-item>
		</uni-forms>
		<view class="title">
			<view style="margin-left: 20rpx;" class="left">待添加设施整改信息</view>
			<view class="right">
				<view class="scan" @click="goScan">
					<image src="/fireGridCheck/static/s.png" mode=""></image>
				</view>
				<text style="color: #3080FB;" @click="goFacilityScan">扫码添加整改设施</text>
			</view>
		</view>
		<view class="info-item" v-if="addList[0]">
			<view class="info-wrap">设施编号：{{addList[0]['设施编号']}}</view>
			<view class="info-wrap">设施名称：{{addList[0]['设施名称']}}</view>
			<view class="info-wrap">具体位置：{{addList[0]['具体位置']}}</view>
			<view class="rectify-type">
				<text>{{addList[0]['设施类型']}}整改项：</text>
				<view style="word-break: break-all; 
			flex: 1;text-align:justify;" :class="{color: value1 === '请选择设施整改项'}" @tap="toOpen1">{{value1}}</view>
				<jpSelect ref="jpSelect1" :list="installConfigList" @checked="checked1" :item="item1" select="more"
					tite=请选择整改项></jpSelect>
			</view>
			<view class="save" @click="addToList">添加</view>
		</view>
		<view v-else class="empty">暂无设施</view>
		<!-- 已添加-->
		<view class="title">
			<view style="margin-left: 20rpx;" class="left">已添加设施整改信息</view>
		</view>
		<view class="info-item" v-for="(item,index) in completeList" :key="item.id">
			<view class="info-wrap">设施编号：{{item['设施编号']}}</view>
			<view class="info-wrap">设施名称：{{item['设施名称']}}</view>
			<view class="info-wrap">具体位置：{{item['具体位置']}}</view>
			<view class="rectify-type">
				<text>煤气罐整改项：</text>
				<view style="word-break: break-all; 
				flex: 1;text-align:justify;" :class="{color: value1 === '请选择消防栓整改项'}">{{item['整改项描述']}}</view>
			</view>
			<view class="delete" @click="onDelete(index)">删除</view>
		</view>
		<view v-if="completeList.length == 0" class="empty">暂无设施</view>
		<view style="padding-left: 20rpx;">
			<view style="margin-left: 20rpx;margin-bottom: 20rpx;" >图片附件</view>
			<upload :max="3" :bMargin="6" v-model="params['照片上传']"></upload>
		</view>
		
		<!-- <view class="delete" @click.stop="onDelete(index)">删除</view> -->
		<!-- <button class="btn check-btn" @click="submitForm">提交</button> -->
		<button class="grid-btn" @click="submitForm">提交</button>
	</view>
</template>

<script>
	import upload from '../components/upload.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import jpSelect from '../components/jp-select/jp-select.vue';
	export default {
		components: {
			upload,
			LbPicker,
			jpSelect
		},
		data() {
			return {
				installConfigList: [],
				facilityType: this.$type.facilityType,
				addList: [],
				installList: [{
					id: 1,
					'设施编号': '123',
					'设施名称': 'adsda',
					'具体位置': '2312321',
					'设备id': null,
					'设施检查项id': []
				}],
				completeList: [],
				label: '请选择检查点类型',
				label1: '请选择检查点名称',
				value: '',
				value1: '请选择设施整改项',
				item: '',
				item1: '',
				installTypeList: this.$type.installTypeList,
				pointTypeList: this.$type.pointTypeList,
				checkPointList: [],
				facilityTypeList: this.$type.facilityTypeList,
				checkPointType: this.$type.checkPointType,
				configList: null,
				hydrantList: [],
				fireList: [],
				smokeList: [],
				temperateList: [],
				gasList: [],
				params: {
					检查点id: null,
					整改事项ids: [],
					检查点类型: null,
					检查点名称: null,
					设施整改项: [],
					地址: null,
					备注: null,
					照片上传: []
				},
				params1: {
					所属网格id: null,
					检查点类型: null,
					pagination: {
						current: 1,
						pageSize: 100
					},
					sorter: {
						field: "id",
						order: 1
					}
				},
				params2: {
					检查点类型: null
				},
				params3: {
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params4: {
					设施类型: []
				},
				//表单验证规则
				rules: {
					检查点类型: {
						rules: [{
							required: true,
							errorMessage: '请选择检查点类型',
						}]
					},
					检查点名称: {
						rules: [{
							required: true,
							errorMessage: '请选择检查点名称',
						}]
					},
					地址: {
						rules: [{
							required: true,
							errorMessage: '请填写检查点地址',
						}]
					}
					// 整改事项ids: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择巡检事项',
					// 	}]
					// }
				}
			}
		},
		onLoad() {
			this.params1.所属网格id = uni.getStorageSync('gridInfo').所属网格id
			// this.getInstallConfig()
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			onDelete(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除该设施整改信息吗?',
					success: (res) => {
						if (res.confirm) {
							this.completeList.splice(index, 1)
						} else if (res.cancel) {
							uni.showToast({
								title: '取消删除',
								icon: 'none'
							})
						}
					}
				})
			},
			addToList() {
				if (!this.addList[0]['设施检查项id']) {
					uni.showToast({
						title: '请选择设施整改项',
						icon: 'none'
					})
					return
				}
				this.completeList.push(this.addList[0])
				this.addList = []
			},
			goFacilityScan() {
				this.$common.scanRectify(this.params.检查点id, this.getInstallInfo)

			},
			getInstallInfo(id) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/device/info', {
					id
				}).then(res => {
					if (res.code === 10000) {
						console.log(res)
						this.params4.设施类型 = [res.data.设施类型]
						this.addList[0] = {
							设备id: res.data.id,
							设施名称: res.data.设施名称,
							设施编号: res.data.设施编号,
							具体位置: res.data.具体位置,
							设施类型: this.facilityType[res.data.设施类型]
						}
						this.value1 = '请选择设施整改项'
						this.item1 = ''
						// this.value1 = `请选择${this.addList[0]['设施类型']}整改项`
						this.getFacilityConfig()
					}
				})
			},
			getFacilityConfig() {
				// this.params4.设施类型 = this.addList[0].设施类型
				this.$http.post('gridSystem/device/configList', this.params4).then(res => {
					console.log(res)
					if (res.data.list !== null) {
						res.data.list.forEach(item => {
							item.name = item.检查项描述
						})
						this.installConfigList = res.data.list
					}
					// this.configList = res.data.list

				})
			},
			validate(params) {
				this.binddata('检查点类型', this.label)
				this.binddata('检查点名称', this.label1)
				this.binddata('地址', params)
			},
			resetValidate() {
				// this.binddata('检查点类型', )
				this.binddata('检查点名称', null)
				this.binddata('地址', null)
			},
			checked(el) {
				this.item = el
				this.value = el.map(item => item.name)
				this.params.整改事项ids = el.map(item => item.id)
				// this.binddata('整改事项ids', this.params.整改事项ids)
				console.log(this.params.整改事项ids)
			},
			checked1(el) {
				this.item1 = el
				this.value1 = el.map(item => item.name).join()
				this.addList[0]['整改项描述'] = el.map(item => item.name).join()
				this.addList[0]['设施检查项id'] = el.map(item => item.id)
				console.log(this.addList[0])
				// this.params.消防栓 = el.map(item => item.id)
			},
			toOpen() {
				if (!this.configList && !this.params.检查点id) {
					uni.showToast({
						title: '请先填写检查点信息',
						icon: 'none'
					})
					return
				}
				if (!this.configList) {
					uni.showToast({
						title: '当前检查点无可选的整改项',
						icon: 'none'
					})
					return
				}
				this.$refs.jpSelect.toOpen()
			},
			toOpen1() {
				this.$refs.jpSelect1.toOpen()
			},
			binddata(name, value) {
				// 通过 input 事件设置表单指定 name 的值
				this.$refs.form.setValue(name, value)
			},
			goScan() {
				this.$common.scanCode(this.getCheckPointInfo)
			},
			getCheckPointInfo(id) {
				uni.showLoading({
					mask: true
				})
				this.params.检查点id = id
				this.$http.post('gridSystem/checkPoint/info', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						// this.params = res.data
						this.label = this.checkPointType[res.data.检查点类型]
						this.params.检查点类型 = res.data.检查点类型
						this.params2.检查点类型 = res.data.检查点类型
						this.params1.检查点类型 = res.data.检查点类型
						this.getCheckPointList()
						this.getCheckConfig()
						if (res.data.检查点类型 == 'company') {
							this.label1 = res.data.公司.企业名称
							this.params.检查点名称 = res.data.公司.企业名称
							this.validate(res.data.公司.地址)
							this.params.地址 = res.data.公司.地址
						} else if (res.data.检查点类型 == 'residential') {
							this.label1 = res.data.高层住宅小区.小区名称
							this.params.检查点名称 = res.data.高层住宅小区.小区名称
							this.params.地址 = res.data.高层住宅小区.地址
							this.validate(res.data.高层住宅小区.地址)
						} else if (res.data.检查点类型 == 'shop') {
							this.label1 = res.data.商铺.商铺名称
							this.params.检查点名称 = res.data.商铺.商铺名称
							this.params.地址 = res.data.商铺.地址
							this.validate(res.data.商铺.地址)
						} else if (res.data.检查点类型 == 'clinic') {
							this.label1 = res.data.个体诊所.诊所名称
							this.params.检查点名称 = res.data.个体诊所.诊所名称
							this.params.地址 = res.data.个体诊所.地址
							this.validate(res.data.个体诊所.地址)
						} else if (res.data.检查点类型 == 'restaurant') {
							this.label1 = res.data.小餐饮店.餐饮店名称
							this.params.检查点名称 = res.data.小餐饮店.餐饮店名称
							this.params.地址 = res.data.小餐饮店.地址
							this.validate(res.data.小餐饮店.地址)
						} else if (res.data.检查点类型 == 'room') {
							this.$http.post('gridSystem/room/info', {
								房屋id: res.data.房屋.房屋id
							}).then(res => {
								if (res.code === 10000) {
									this.label1 = res.data.房屋名称
									this.params.检查点名称 = res.data.房屋名称
									this.params.地址 = res.data.房屋名称
									this.validate(res.data.房屋名称)
								}
							})
						}
					}
				})
			},
			getCheckPointList() {
				this.$http.post('gridSystem/checkPoint/list', this.params1).then(res => {
					console.log(res)
					if (res.code === 10000) {
						if (res.data.list !== null) {
							res.data.list.forEach(item => {
								item.value = item.检查点名称
								item.label = item.检查点名称
							})
						}
						this.checkPointList = [...this.checkPointList, ...res.data.list]
						if (res.data.list) {
							this.params1.pagination.current++
							this.getCheckPointList()
						}
					}
				})
			},
			getCheckConfig() {
				this.$http.post('gridSystem/checkPoint/configList', this.params2).then(res => {
					console.log(res, '设施检查项')
					if (res.data.list !== null) {
						res.data.list.forEach(item => {
							item.name = item.检查项描述
						})
					}
					this.configList = res.data.list

				})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.检查点类型 = e.item.id
					this.params1.检查点类型 = e.item.id
					this.params2.检查点类型 = e.item.id
					this.label1 = '请选择检查点名称',
						this.params.地址 = null
					this.value = ''
					this.item = ''
					this.params.整改事项ids = []
					this.params.检查点名称 = ''
					this.checkPointList = []
					this.resetValidate()
					this.getCheckPointList()
					this.getCheckConfig()
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleConfirm1(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.检查点名称 = e.item.label
					this.params.检查点id = e.item.id
					this.params.地址 = e.item.地址
					this.binddata('地址', e.item.地址)
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					console.log('表单数据信息：', res);
					if (this.params.整改事项ids.length == 0 && this.completeList.length == 0) {
						uni.showToast({
							title: '请填写整改事项或设施整改项',
							icon: 'none'
						})
						return
					}
					this.params.设施整改项 = this.completeList
					// console.log(this.params)
					this.addRectify(this.params)
					// this.resident.roomIds = [this.resident.roomIds]
				}).catch(err => {
					console.log(this.params)
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			addRectify(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/check/solveAdd', params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.redirectTo({
							url: '/fireGridCheck/acceptSuccess/acceptSuccess?path=../index/index' +
								'&title=返回首页'
						})

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-wrap {
		padding: 0 36rpx;

		.item-wrap {
			margin-bottom: 10rpx;
		}
	}

	.empty {
		// width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 174rpx;
		color: #999;
	}

	.title {
		display: flex;
		height: 100rpx;
		padding: 0 20rpx;
		justify-content: space-between;
		align-items: center;

		.left {
			color: #333;
			font-size: 32rpx;

			&:before {
				content: '';
				position: absolute;
				top: 34rpx;
				left: 10rpx;
				width: 6rpx;
				height: 34rpx;
				background-color: #5094FF;
			}
		}

		.scan {
			width: 34rpx;
			height: 30rpx;
			margin-right: 12rpx;
			margin-top: 2rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			display: flex;
			//vertical-align: middle;
			// align-items: center;
		}
	}

	// .rectify-install-item {
	// 	border: 2rpx solid #f5f5f5;
	// 	height: 300rpx;
	// 	margin-left: 20rpx;
	// 	padding-left: 20rpx;
	// 	.border {
	// 		border-bottom: 0;
	// 		padding-left: 0!important;
	// 	}
	// }
	.info-item {
		position: relative;
		width: 690rpx;
		margin-left: 40rpx;
		// padding: 20rpx;
		border: 2rpx solid #f5f5f5;
		// box-shadow: 0px 1px 6rpx 0px #EEEEEE;
		border-radius: 8rpx;
		margin-bottom: 10rpx;
		font-size: 32rpx;
		padding: 20rpx 0 30rpx;

		.info-title {
			margin-bottom: 20rpx;
		}

		.info-wrap {
			line-height: 60rpx;
			font-size: 32rpx;
			width: 20em;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.save {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			text-align: center;
			line-height: 44rpx;
			width: 90rpx;
			height: 44rpx;
			font-size: 24rpx;
			background: #3080FB;
			color: #fff;
			// border: 2rpx solid #E57544;
		}

		.delete {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			text-align: center;
			line-height: 44rpx;
			width: 90rpx;
			height: 44rpx;
			font-size: 24rpx;
			color: #E57544;
			border: 2rpx solid #E57544;
		}

		.rectify-type {
			display: flex;
			align-items: center;
		}
	}
</style>
